<template>
  <div id="app">
    <HelloWorld msg01="我的数据来源" />
    <div>
        <el-row>
            <el-button type="primary"><router-link to="/Home">Home</router-link></el-button>
            <el-button type="success"><router-link to="/Login">Login</router-link></el-button>
            <el-button type="warning"><router-link to="/Products">Products</router-link></el-button>
            <el-button type="danger"><router-link to="/Fst08">Go</router-link></el-button>
            <a href="javascript:void(0)" @click="open_blank">NewPage</a>
        </el-row>
        <router-view></router-view>
    </div>
    <div>

        <h1>App组件获取共享数据：{{ $store.state.num }}</h1>
        <el-button @click="$store.commit('addNum')">点击该组件触发共享数据counter递增</el-button>
        <el-button @click="$store.dispatch('subNum')">点击该组件异步触发共享数据counter递减</el-button>
    </div>
  </div>

</template>

<script>
 import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
      return{
          msg01:"xxxxxxx"
      }
  },
  methods:{

      open_blank(){
          window.open('/Fst02','_blank')
      }
  } ,
  components: {
    HelloWorld
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
